<template>
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" :checked="isall" @change="tood">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <!-- These are here just to show the structure of the list items -->
            <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
            <li v-for="(item,index) in arr" :key="item.id" :class="{completed:item.isDone}">
                <div class="view">
                    <input class="toggle" type="checkbox" v-model="item.isDone">
                    <label>{{item.name}}</label>
                    <button class="destroy" @click="del(index)"></button>
                </div>
            </li>
        </ul>
    </section>
</template>

<script>
    export default {
        props: ['arr'],
        methods: {
            del(index) {
                this.arr.splice(index, 1)
            },
            tood(e) {
                this.arr.forEach(item => item.isDone = e.target.checked)
            }

        },
        computed: {
            isall() {
                return this.arr.every(item => item.isDone)
            },

        }
    }
</script>

<style>

</style>